<style>
   .form {
        width: 60%;
        margin-left: 20%;
        margin-top: 1%;   
    }
</style>
<template>
    <div>
        <div>
            <Form ref="formValidate" :rules="ruleValidate" :model="new_GSXT" class = "form" label-position="right" :label-width="120" width="100%">
                <FormItem label="Url:" prop="url">
                    <Input v-model="new_GSXT.url" size="large" :disabled="this.write_status" placeholder='请输入用友企业查询接口url'></Input>
                </FormItem>
                <FormItem label="apicode:" prop="apicode">
                    <Input v-model="new_GSXT.apicode" size="large" :disabled="this.write_status" placeholder='请输入用友apicode'></Input>
                </FormItem>
                <center v-if="status == 1">
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="add()">添加</Button>
                </center>
                <center v-if="status == 2">
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="create_GSXT('formValidate')">确定</Button>
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="cancel()">取消</Button>
                </center>
                <center v-if="status == 3">
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="add()">添加</Button>
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="modify_GSXT()">修改</Button>
                </center>
                <center v-if="status == 4">
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="modify_ph('formValidate')">修改</Button>
                    <Button style="font-size:15px;width:10%" size="small" type="primary" @click="cancel()">取消</Button>
                </center>
            </Form>
        </div>
        <div style="margin-top:20px">
            <i-table  :border="true" :columns="columns5" :data="GSXT_info"></i-table>
        </div>   
    </div>
</template>

<script>
import Vue from 'vue';
import parent from "../Parent";
export default {
    extends: parent,
    data () { 
        return {
            change_id:0,
            write_status:true,
            status:1,
            columns5: [
                {
                    type: 'index',
                    title:'序号',
                    width: 80,
                    align: 'center'
                },
                {
                    title: 'url',
                    align: 'center',
                    key: 'url'
                },
                {
                    title: 'apicode',
                    align: 'center',
                    key: 'apicode'
                },
                {
                    title:'操作',
                    width:300,
                    align:'center', 
                    render:(h,params)=>{
                    return h('div', [
                        h('Button', {
                            props: { type: 'primary', size: 'small' },
                            style: { marginRight: '5px',display:this.showButton("111532")},
                            on: { click: () => { this.select_GSXT(params) } }
                        }, this.userOrNOt(params)),
                        h('Button', {
                            props: { type: 'info', size: 'small' },
                            style: { marginRight: '5px'},
                            on: { click: () => { this.modify(params) } }
                        }, '修改'),
                        h('Button', {
                            props: { type: 'error', size: 'small' },
                            style: { marginRight: '5px',display:this.showButton("111512")},
                            on: { click: () => { this.delete_GSXT(params) } }
                        }, '删除'),
                    ]
                    );
                }}
            ],
            total:'',
            status: true,
            new_GSXT: {
                url: "",
                apicode: ""
            },
            GSXTs:{},
            ruleValidate:{
                url: [
                    { required: true, message:"url不能为空", trigger:"blur"}
                ],
                apicode: [
                    { required: true, message:"apicode不能为空", trigger:"blur"},
                ],
            }
                
        }
    },
    computed:{

        GSXT_info(){
            var GSXT_list = [];
            for(var i = 0; i < this.total; i++)
            {
                GSXT_list[i] = {};
                GSXT_list[i].id = this.GSXTs[i].id;
                GSXT_list[i].url = this.GSXTs[i].url;
                GSXT_list[i].apicode = this.GSXTs[i].apicode;
                GSXT_list[i].selected = this.GSXTs[i].selected;
            }
            return GSXT_list;
        }
    },
    methods: {
        add(){
            this.status = 2;
            this.write_status = false;
        },
        cancel(){
            this.change_id = 0;
            this.new_GSXT.url = "";
            this.new_GSXT.apicode = "";
            this.status = 1;
            this.write_status = true;
        },
        modify_ph(formValidate){
            this.$refs[formValidate].validate((valid) => {
                if(valid){
                    this.api.post("GSXT/modify", {
                        id: this.change_id,
                        url: this.new_GSXT.url,
                        apicode:this.new_GSXT.apicode
                    }, res => {
                        this.$CustomMessage.success("添加成功");
                        this.get_table();
                    });
                }else {
                    this.$CustomMessage.error("请按要求填写信息");
                }
                
            })
        },
        create_GSXT(formValidate){
            this.$refs[formValidate].validate((valid) => {
                if(valid){
                    this.change_id = 0;
                    this.api.post("GSXT/add", {
                            url: this.new_GSXT.url,
                            apicode:this.new_GSXT.apicode
                        }, res => {
                            this.$CustomMessage.success("添加成功");
                            this.get_table();
                    });
                }else {
                    this.$CustomMessage.error("请按要求填写信息");
                }
            })
        },
        select_GSXT(params){
            this.api.post("GSXT/select",{id: params.row.id},res=>{
                if(res.value){
                    this.$CustomMessage.success("启用成功");
                }else{
                    this.$CustomMessage.error("启用失败");
                }
                this.get_table();
            })
        },
        modify(params){
            this.new_GSXT.url = params.row.url;
            this.new_GSXT.apicode = params.row.apicode;
            this.change_id = params.row.id;
            this.status = 3;
            this.write_status = true;
        },
        modify_GSXT(){
            this.status = 4;
            this.write_status = false;
        },
        delete_GSXT(params){
            if(confirm("是否确定删除？（不可恢复）")) {
                this.api.post("GSXT/delete",{
                    id: params.row.id
                },res =>{
                    this.$CustomMessage.success("删除成功");
                    this.get_table();
                })
            }
        },
        userOrNOt(params)
        {
            var id = params.row.selected;
            if(id == 1)
            {
                return "已启用";
            }else {
                return "启用";
            }
        },
        get_table(){
            this.api.post("GSXT/get_list", res => {
                this.GSXTs = res.list;
                this.total = res.list.length;
                console.log(this.GSXTs);
                console.log(this.total);
            });
        }
    },
    created() {
        this.get_table();
    }  
}
</script>
